<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--
axios


-->
<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <p> {{ joke }}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /*
          接口:随机获取一条笑话
          请求地址:https://autumnfish.cn/api/joke
          请求方法:get
          请求参数:无
          响应内容:随机笑话
      */
  var app = new Vue({
      el:"#app",
      data:{
        joke:"很好笑的笑话"
      },
      methods:{
          getJoke:function (){
              axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                  var that = this;
              },function (err) {
                that.joke = response.data;
              })
          }
      }
  });


</script>
</html>